<template>
  <div>
    <div class="box">
      <div>
        <h2>基本信息</h2>
        <hr class="line">
        <Row>
          <Col span="2">
          <h3>消息ID：</h3></Col>
          <Col span="22" class="text_left">
          <p>{{msg.id}}</p></Col>
        </Row>
        <Row>
          <Col span="2">
          <h3>焦点信息：</h3></Col>
          <Col span="22" class="text_left">
          <p>{{msg.isFocus}}</p></Col>
        </Row>
        <Row>
          <Col span="2">
          <h3>展示图：</h3></Col>
          <Col span="22" class="text_left">
          <p>{{msg.popupImage}}</p></Col>
        </Row>
        <Row>
          <Col span="2">
          <h3>标题：</h3></Col>
          <Col span="22" class="text_left">
          <p>{{msg.title}}</p></Col>
        </Row>
        <Row>
          <Col span="2">
          <h3>子标题：</h3></Col>
          <Col span="22" class="text_left">
          <p>{{msg.subtitle}}</p></Col>
        </Row>
        <Row>
          <Col span="2">
          <h3>标题图片：</h3></Col>
          <Col span="22" class="text_left">
          <p>{{msg.titleImage}}</p></Col>
        </Row>
        <Row>
          <Col span="2">
          <h3>发送时间：</h3></Col>
          <Col span="22" class="text_left">
          <p>{{msg.sendTime}}</p></Col>
        </Row>

        <Row>
          <Col span="2">
          <h3>发送状态：</h3></Col>
          <Col span="22" class="text_left">
          <p>{{msg.status}}</p></Col>
        </Row>
        <Row>
          <Col span="2">
          <h3>消息详情类型：</h3></Col>
          <Col span="22" class="text_left">
          <p>{{msg.contentType==1?"文本内容":"跳转链接"}}</p></Col>
        </Row>
        <Row>
          <Col span="3">
          <h3>外部浏览器打开：</h3></Col>
          <Col span="11" class="text_left">
          <p>{{msg.targetBrowser}}</p></Col>
        </Row>
        <Row>
          <Col span="2">
          <h3>审核状态：</h3></Col>
          <Col span="22" class="text_left">
          <p>{{msg.isReview}}</p></Col>
        </Row>

      </div>

      <div>
        <h2>统计</h2>
        <hr class="line">
        <Row class="dataNum">
          <Col span="6">
          <dl>
            <dd><b>{{msg.sendCount}}</b></dd>
            <dd><p>发送用户</p></dd>
          </dl>
          </Col>

          <Col span="6">
          <dl>
            <dd><b>{{msg.readCount}}</b></dd>
            <dd><p>已读用户</p></dd>
          </dl>
          </Col>

          <Col span="6">
          <dl>
            <dd><b>{{msg.viewCount}}</b></dd>
            <dd><p>查看详情用户</p></dd>
          </dl>
          </Col>

          <Col span="6">
          <dl>
            <dd><b>{{msg.bili}}%</b></dd>
            <dd><p>跳转比例</p></dd>
          </dl>
          </Col>
        </Row>
      </div>

      <div>
        <h2>日志</h2>
        <hr class="line">

        <Form :model="formItem" :label-width="80">
          <Row>
            <Col span="5">
            <FormItem label="开始日期">
              <DatePicker type="date"  :options='pickerBeginDateBefore' v-model="formItem.start" @on-change="geTimestart"></DatePicker>
            </FormItem>
            </Col>
            <Col span="5">
            <FormItem label="结束日期">
              <DatePicker type="date" :options="pickerBeginDateAfter"  v-model="formItem.end" @on-change="geTimend"></DatePicker>
            </FormItem>
            </Col>

            <Col span="5">
            <FormItem label="渠道">
              <Select v-model="formItem.channel">
                <Option v-for="item in formItem.channelArr" :value="item" :key="item">{{ item }}</Option>
              </Select>
            </FormItem>
            </Col>

            <Col span="5">
            <FormItem label="状态">
              <Select v-model="formItem.status">
                <Option v-for="item in formItem.statusArr" :value="item" :key="item">{{ item }}</Option>
              </Select>
            </FormItem>
            </Col>

            <Col span="1" offset="1">
            <Button type="primary" @click="logInfo">查询</Button>
            </Col>

            <Col span="1" offset="1">
            <Button type="primary" @click="exportData">导出</Button>
            </Col>

          </Row>
        </Form>

        <Table border :columns="columns" :data="datas" ref="msg_table"></Table>

        <Page :total="pageTotal"
              pageSize="30"
              size="small"
              @on-change="logInfoPage"
              show-elevator
              show-total>
        </Page>
      </div>
    </div>
  </div>

</template>

<script>

  import * as Url from '../../api/url'
  import * as fuc from '../../lib/lib'
  import axios from 'axios'

  export default {

    data () {
      return {
        ID: this.$route.query.id,
        msg: {
          id: '',
          isFocus: '',      //焦点信息
          popupImage: '',   //展示图
          title: '',      //标题
          subtitle: '',    //子标题 ,
          titleImage: '',  //标题图片 ,
          sendTime: '',     //发送时间(yyyy年MM月dd日 HH:mm) ,
          status: '',       //消息状态 0.待发送 1.已发送 -1.已删除 ,
          isReview: '',     //是否审核通过:0 否 1 是 ,
          sendCount: '',    //发送用户数量 ,
          readCount: '',    //已读用户数量 ,
          viewCount: '',    //查看用户数量 ,
          bili: '',         //比例
          targetBrowser:'',
          contentType:'',
          content:'',
          alink:''
        },
        columns: [
          {title: '用户名', key: 'customerAccount'},
          {title: '读取时间', key: 'viewTime'},
          {title: '是否查看详情', key: 'isView'},
          {title: '渠道', key: 'channel'}
        ],
        datas: [],
        pageTotal: '',    //总页数
        pageNum: '0',       //当前分页
        formItem: {
          start: '',      //开始时间
          end: '',       //结束
          channel: '全部',   //渠道 moren
          channelArr: ['全部', 'snap', 'element', 'life'],
          status: '全部',    //状态
          statusArr: ['全部','已读','未读']
        },
        pickerBeginDateBefore: {
          disabledDate (date) {
            return date.getTime() > Date.now();
          }
        },
        pickerBeginDateAfter: {
          disabledDate: (date) => {
            let beginDateVal = this.formItem.start;
            if (beginDateVal) {
              return date.getTime() < beginDateVal;
            }
          },
        }
      }
    },
    mounted: function () {
      this.$nextTick(function () {
        this.pageChange(this.pageNum)
      })
    },
    computed: {},
    methods: {
      pageChange(page){
        this.pageNum = page;
        axios.get(Url.message + this.ID).then(response => {
          let msg = response.data.data
          this.msg.id = msg.id
          this.msg.alink = msg.alink
          this.msg.title = msg.title
          this.msg.subtitle = msg.subtitle
          this.msg.titleImage = msg.titleImage
          this.msg.popupImage = msg.popupImage
          this.msg.sendTime = msg.sendTime
          this.msg.sendCount = msg.sendCount
          this.msg.readCount = msg.readCount
          this.msg.viewCount = msg.viewCount
          this.msg.targetBrowser =msg.targetBrowser
          this.msg.bili = msg.jumpRatio
          this.msg.contentType=msg.contentType
          this.msg.content=msg.content
          this.msg.alink=msg.alink
          switch (msg.targetBrowser) {
            case 1:
              this.msg.targetBrowser = '否'
              break
            case 2:
              this.msg.targetBrowser = '是'
              break
          }
          switch (msg.isReview) {
            case 0:
              this.msg.isReview = '未通过'
              break
            case 1:
              this.msg.isReview = '通过'
              break
          }
          switch (msg.isFocus) {
            case 0:
              this.msg.isFocus = '否'
              break
            case 1:
              this.msg.isFocus = '是'
              break
          }
          switch (msg.status) {
            case  0:
              this.msg.status = '待发送'
              break
            case  1:
              this.msg.status = '已发送'
              break
            case  3:
              this.msg.status = '发送中'
              break
            case -1:
              this.msg.status = '已删除'
              break
          }
        }).catch(error => {
        })
        this.dataAction();
      },

      geTimestart(date){
        this.formItem.start = date
      },
      geTimend(date){
        this.formItem.end = date
      },
      dataAction(){
        if(this.formItem.start !="NaN-NaN-NaN" && this.formItem.start !="" ){
          this.formItem.start =fuc.dateFormatYMD(this.formItem.start);
          if(this.formItem.start=="1970-01-01"){
            this.formItem.start =null;
          }
        }else {
          this.formItem.start =null;
        }
        if(this.formItem.end !="NaN-NaN-NaN" && this.formItem.end !="" ){
          this.formItem.end =fuc.dateFormatYMD(this.formItem.end);
          if(this.formItem.end=="1970-01-01"){
            this.formItem.end =null;
          }
        }else {
          this.formItem.end =null;
        }
        switch (this.formItem.channel) {
          case '全部':
            this.formItem.channel = 0
            break
          case 'snap':
            this.formItem.channel = 1
            break
          case 'element':
            this.formItem.channel = 2
            break
          case 'life':
            this.formItem.channel = 3
            break
        }
        switch (this.formItem.status) {
          case '未读':
            this.formItem.status = 0;
            break;
          case '已读':
            this.formItem.status = 1;
            break;
          case '全部':
            this.formItem.status = 2;
            break;
        }
        let data = {
          id: this.ID,
          beginDate: this.formItem.start,
          endDate: this.formItem.end,
          channel: this.formItem.channel,
          status: this.formItem.status,
          pageNo: this.pageNum
        }
        this.ApiMessageDetail(data);
      },
      logInfoPage(page){
        this.pageNum =page;
        this.dataAction();
      },
      logInfo(){
        this.pageNum =0;
        this.pageTotal=0;
        this.dataAction();
      },
      ApiMessageDetail(data){
        axios.get(Url.messageTab + this.ID, {params: data}).then(response => {
          this.datas=[];
          if(response.data.data.data !=undefined && response.data.data.data.length>0){
            this.pageTotal = response.data.data.totalCount;
            this.datas = response.data.data.data;
          }else {
            this.pageTotal = 0;
          }

        }).catch(error => {
          this.pageTotal = 0;
          //this.$Message.error('查询失败')
        })
      },
      exportData(){
        this.$refs.msg_table.exportCsv({
          filename: '消息数据'
        })
      }
    },
    components: {}
  }
</script>

<style scoped>
  .box {
    padding: 10px;
  }

  h2, h3 {
    color: #5e5e5e;
  }

  .ivu-input[disabled], fieldset[disabled] .ivu-input {
    background-color: #f3f3f3;
    opacity: 1;
    cursor: not-allowed;
    color: #6b6b6b;
  }

  .ivu-page {
    margin-top: 10px;
  }

  .ivu-row {
    margin-bottom: 5px;
  }

  .line {
    margin-bottom: 10px;
  }

  .text_left {
    text-align: left;
    font-size: 14px;
  }

  .dataNum dl dd {
    display: block;
    text-align: center;
  }

  .dataNum dl dd b {
    font-size: 30px;
  }

  .dataNum dl dd p {
    font-size: 14px;
    font-weight: 100;
  }

  .dataNum dl:hover {
    color: #ff942a;
    cursor: pointer
  }
</style>
